<template>
    <div class="aside">
        <el-menu active-text-color="rgb(64, 158, 255)" background-color="rgb(48, 65, 86)" class="el-menu-vertical-demo"
            :default-active="defUrl" text-color="#fff" unique-opened :collapse="asideStore.isCollapse" router>

            <el-menu-item index="/index">
                <i class="iconfont homepage"></i>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu :index="'/' + item.name" v-for="item in menus" :key="item.id">
                <template #title>
                    <i class="iconfont" :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                </template>
                <template v-for="sub in item.children" :key="sub.id">
                    <el-menu-item :index="'/' + item.name + '/' + sub.name" v-if="sub.hidden === 0">
                        <i class="iconfont" :class="sub.icon"></i>
                        {{ sub.title }}
                    </el-menu-item>
                </template>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { useAsideStore } from "@/store/aside"
import { useUserStore } from "@/store/user"
import { ref, watch } from "vue"
import { useRoute } from "vue-router"


const asideStore = useAsideStore();
const userStore = useUserStore();
const menus = userStore.router
const route = useRoute();
const defUrl = ref("/index")

watch(
    () => route.path,
    () => {
        defUrl.value = route.path
    }, {
    immediate: true
}
);

</script>

<style scoped lang="less">
.aside {
    :deep(.el-menu) {
        border-right: 0 !important;
    }

    .el-menu-vertical-demo {
        width: 250px;
    }

    :deep(.el-menu--collapse) {
        width: 64px;
    }

    // el-menu el-menu--vertical el-menu-vertical-demo v-enter-to
}
</style>